<%--@elvariable id="APP_PATH" type=""--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/font-awesome.min.css">
    <link rel="stylesheet" href="${APP_PATH}/css/main.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor: pointer;
        }

        table tbody tr:nth-child(odd) {
            background: #F4F4F4;
        }

        table tbody td:nth-child(even) {
            color: #C00;
        }
    </style>
</head>

<body>

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
    <div class="container-fluid">
        <div class="navbar-header">
            <div><a class="navbar-brand" style="font-size:32px;" href="#">众筹平台 - 用户维护</a></div>
        </div>
        <%@include file="../common/top.jsp"%>
    </div>
</nav>

<div class="container-fluid">
    <div class="row">
        <div class="col-sm-3 col-md-2 sidebar">
            <div class="tree">
                <%@include file="../common/menu.jsp"%>
            </div>
        </div>
        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title"><i class="glyphicon glyphicon-th"></i> 数据列表</h3>
                </div>
                <div class="panel-body">
                    <form class="form-inline" role="form" style="float:left;">
                        <div class="form-group has-feedback">
                            <div class="input-group">
                                <div class="input-group-addon">查询条件</div>
                                <input id="queryText" class="form-control has-success" type="text" placeholder="请输入查询条件">
                            </div>
                        </div>
                        <button id="queryBtn" type="button" class="btn btn-warning"><i class="glyphicon glyphicon-search"></i> 查询
                        </button>
                    </form>
                    <button onclick="deleteUsers()" type="button" class="btn btn-danger" style="float:right;margin-left:10px;"><i
                            class=" glyphicon glyphicon-remove"></i> 删除
                    </button>
                    <button type="button" class="btn btn-primary" style="float:right;"
                            onclick="window.location.href='${APP_PATH}/user/add'"><i class="glyphicon glyphicon-plus"></i> 新增
                    </button>
                    <br>
                    <hr style="clear:both;">
                    <div class="table-responsive">
                        <form id="userForm">
                        <table class="table  table-bordered">
                            <thead>
                            <tr>
                                <th width="30">#</th>
                                <th width="30"><input id="allSelect" type="checkbox"></th>
                                <th>账号</th>
                                <th>名称</th>
                                <th>邮箱地址</th>
                                <th width="100">操作</th>
                            </tr>
                            </thead>
                            <tbody id="usersTable">


                            </tbody>
                            <tfoot>
                            <tr>
                                <td colspan="6" align="center">
                                    <ul class="pagination" id="userPagination">

                                    </ul>
                                </td>
                            </tr>

                            </tfoot>
                        </table>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${APP_PATH}/jquery/jquery-2.1.1.min.js"></script>
<script src="${APP_PATH}/bootstrap/js/bootstrap.min.js"></script>
<script src="${APP_PATH}/script/docs.min.js"></script>
<script src="${APP_PATH}/layer/layer.js"></script>
<script type="text/javascript">
    var flagLike=false;
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        pageQuery(1);


        $("#queryBtn").click(function () {
            var queryText=$("#queryText").val();
            if (queryText == "") {
                flagLike=false;
            }else{
                flagLike=true;
            }
            pageQuery(1);
        });
        $("#allSelect").click(function () {
            var totalFlag=this.checked;
            $("#usersTable :checkbox").each(function () {
                this.checked=totalFlag;
            });
        });
    });
    $("tbody .btn-success").click(function(){
        window.location.href = "assignRole.html";
    });
    $("tbody .btn-primary").click(function(){
        window.location.href = "edit.html";
    });
    function pageQuery(pageno){
        var loadingIndex=null;
        var jsonData={
            pageNo:pageno,
            pageSize:"10"
        };
        if(flagLike){
            jsonData.queryText=$("#queryText").val();
        }
        $.ajax(
            {
                type:"POST",
                url:"${APP_PATH}/user/page",
                data:jsonData,
                beforeSend:function () {
                    loadingIndex = layer.msg('处理中', {icon: 16});
                },
                success:function (result) {
                    layer.close(loadingIndex);
                    if(result.success){
                        var page=result.datas;
                        var userList=page.list;
                        var tableContent = "";
                        var pageContent = "";
                        $.each(userList,function (i,user) {
                            tableContent+='<tr>';
                            tableContent+='<td>'+(i+1)+'</td>';
                            tableContent+='<td><input name="id" value='+user.id+' type="checkbox"></td>';
                            tableContent+='<td>'+(user.loginacct)+'</td>';
                            tableContent+='<td>'+(user.username)+'</td>';
                            tableContent+='<td>'+(user.email)+'</td>';
                            tableContent+='<td>';
                            tableContent+='<button type="button" class="btn btn-success btn-xs"><i class=" glyphicon glyphicon-check" onclick="goAssignRole('+user.id+')"></i></button>';
                            tableContent+='<button type="button" class="btn btn-primary btn-xs"><i class=" glyphicon glyphicon-pencil" onclick="goUpdatePage('+user.id+')"></i></button>';
                            tableContent+='<button type="button" class="btn btn-danger btn-xs"><i class=" glyphicon glyphicon-remove" onclick="deleteUser('+user.id+',\''+user.loginacct+'\')"></i></button>';
                            tableContent+='</td>';
                            tableContent+='</tr>';
                        });
                        if (pageno > 1) {
                            pageContent+='<li><a href="#" onclick="pageQuery('+(pageno-1)+')">上一页</a></li>';
                        }else{
                            pageContent+='<li class="disabled"><a href="#" >上一页</a></li>';
                        }
                        for (var i=1;i<=page.totalPage;i++){
                            if(pageno==i){
                                pageContent+='<li class="active"><a href="#" >'+i+'</a>';
                            }else{
                                pageContent+='<li><a href="#" onclick="pageQuery('+i+')">'+i+'</a>';
                            }

                        }
                        if(pageno<page.totalPage){
                            pageContent+='<li><a href="#" onclick="pageQuery('+(pageno+1)+')">下一页</a></li>';
                        }else{
                            pageContent+='<li class="disabled"><a href="#" >下一页</a></li>';
                        }

                        $("#usersTable").html(tableContent);
                        $("#userPagination").html(pageContent);

                    }else{
                        layer.msg("用户分页查询失败", {time: 2000, icon: 5, shift: 6}, function () {

                        });
                    }
                }
            }
        );
    }
    function goUpdatePage(id) {
        window.location.href="${APP_PATH}/user/edit?id="+id;
    }

    function goAssignRole(id) {
        window.location.href="${APP_PATH}/user/goAssignRole?id="+id;
    }

    function deleteUsers() {
        /*
          0，判断是否选择了用户
        * 1，弹窗确认
        * 2，取到选择的那些用户的id
        * 3，ajax后端删除
        * 4，然后查询回到原来的页面
        *
        * */
        var checkboxs=$("#usersTable input:checked");
        if(checkboxs.length==0){
            layer.msg("请选择用户后再点删除", {time: 2000, icon: 5, shift: 6}, function () {

            });
        }else{
            layer.confirm("是否删除选中的用户",  {icon: 3, title:'提示'}, function(cindex){
                var loadingIndex=null;
                var data=$("#userForm").serialize();
                $.ajax(
                    {
                        url: "${APP_PATH}/user/deletes",
                        method:"POST",
                        data:data,
                        beforeSend:function () {
                            loadingIndex = layer.msg('处理中', {icon: 16});
                        },
                        success:function (result) {
                            layer.close(loadingIndex);
                            if(result.success){
                                pageQuery(1);
                            }else{
                                layer.msg("选中的用户删除失败", {time: 2000, icon: 5, shift: 6}, function () {

                                });
                            }
                        }
                    }
                );
            }, function(cindex){
                layer.close(cindex);
            });
        }
    }

    function deleteUser(id, loginacct) {
        layer.confirm("是否删除用户【"+loginacct+"】",  {icon: 3, title:'提示'}, function(cindex){
            var loadingIndex=null;
            $.ajax(
                {
                    url: "${APP_PATH}/user/delete",
                    method:"POST",
                    data:{
                        id:id
                    },
                    beforeSend:function () {
                        loadingIndex = layer.msg('处理中', {icon: 16});
                    },
                    success:function (result) {
                        layer.close(loadingIndex);
                        if(result.success){
                            pageQuery(1);
                        }else{
                            layer.msg("用户删除失败", {time: 2000, icon: 5, shift: 6}, function () {

                            });
                        }
                    }
                }
            );
        }, function(cindex){
            layer.close(cindex);
        });
    }



</script>
</body>
</html>

